
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>
					创建人员
				</legend>
				<div class="form-group">
					<label>姓名:</label>
					<input type="text" v-model="newPerson.name"/>
				</div>
				<div class="form-group">
					<label>年龄:</label>
					<input type="text" v-model="newPerson.age"/>
				</div>
				<div class="form-group">
					<label>姓名:</label>
					<select v-model="newPerson.sex">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
				</div>
				<div class="form-group">
					<label></label>
					<button @click="createPerson">创建</button>
				</div>
		</fieldset>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>干掉</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="person in people">
					<td>{{ person.name }}</td>
					<td>{{ person.age }}</td>
					<td>{{ person.sex }}</td>
					<td :class="'text-center'">
						<button @click="deletePerson($index)">干掉</button>
					</td>
				</tr>
			</tbody>
		</table>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				newPerson: {
					name: '',
					age: 0,
					sex: '男'
				},
				people: [{
					name: '张三',
					age: 30,
					sex: '男'
				}, {
					name: '李四',
					age: 26,
					sex: '男'
				}, {
					name: '王五',
					age: 22,
					sex: '女'
				}, {
					name: '赵六',
					age: 36,
					sex: '男'
				}]
			},
			methods:{
				createPerson: function(){
					this.people.push(this.newPerson);
					// 添加完newPerson对象后，重置newPerson对象
					this.newPerson = {name: '', age: 0, sex: '男'}
				},
				deletePerson: function(index){
					// 删一个数组元素
					this.people.splice(index,1);
				}
			}
		})
	</script>
</html>